<script setup>
   import {ref} from 'vue';

   /**
    * 3. vue的事件
    *    为啥会有vue的事件,原有的事件属性无法调用vue的方法和属性,需要添加特殊标识标识可以调用
    *    语法: v-on:事件名 例如: onclick => v-on:click || ondblclick = v-on:dblclick
    *                          onchange => v-on:change
    *    简化语法: v-on == @click
    *    事件修饰符: 
    *       - .once：只触发一次事件。[重点]`；
            - .prevent：阻止默认事件。[重点]，例如：a标签添加阻止默认事件，就不触发href属性对应的地址了`；
    */
   //vue3的组合式api中,所有数据默认非响应
   let counter = ref(0);

   //定义方法
   function sum (){
     counter.value = 10;
   }
</script>

<template>
    <div>
      <button @click.once="counter--">counter-1</button>
       {{counter}}
       <br>
       <!-- sum is not  defined 
            因为: onclick还是原来的html事件,调用的都是window的属性和函数
            setup都是vue的属性和方法,所以原始的事件无法调用和修改了 
       -->
       <button v-on:click="sum()">counter=10</button>
    </div>

</template>

<style scoped>
</style>
